<template>
	<transition name="fade">
		<div class="mj-message" v-if="showIt">
			<div class="mask-box" v-if="mask" :style="{'opacity':opacity}"></div>
			<div class="message-box">
				<span>{{text}}</span>
			</div>
		</div>
	</transition>
</template>
<script>
/* eslint-disable */
export default {
  name: 'mjMessage',
  data(){
    return {
      showIt: false,
      mask:false,
      text:'',
      opacity:0
    }
  },
  methods:{
    show({duration=2500,text='',mask=false,opacity=0}){
      this.text = text
      this.mask = !!opacity||mask
      this.opacity = opacity
      this.showIt = true
      setTimeout(() => {
        this.close()
      }, duration);
    },
    close(){
      this.showIt = false
      // 去除节点
      setTimeout(() => {
				this.$el.parentNode.removeChild(this.$el)
				this.$emit('finished')
      }, 600);
    }
  }
};
</script>
<style scoped lang="scss">
.mj-message {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1000;

	// width: 100vw;
	// height: 100vh;
	.mask-box {
		background: rgba(51, 51, 51, 0.336);
		width: 100vw;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1000;
	}
	.message-box {
		z-index: 1001;
		display: inline-block;
		position: fixed;
		top: 50%;
		left: 50%;
		max-width: 50%;
		transform: translate(-50%, -50%);
		margin: 0 auto;
		padding: 5px 8px;
		border-radius: 5px;
		background: rgba(0, 0, 0, 0.521);
		color: white;
	}
}
.fade-enter-active,
.fade-leave-active {
	transition: opacity 0.5s;
}
.fade-enter,
.fade-leave-to {
	opacity: 0;
}
</style>
